<template>
    <div class="success-container">
        <!-- 成功图标 -->
        <div class="success-icon">
            <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
                <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
            </svg>
        </div>

        <!-- 主要内容 -->
        <div class="success-content">
            <h1 class="title">支付成功！</h1>
            <p class="description">感谢您的购买，订单处理中</p>

            <!-- 订单信息 -->
            <div class="order-info">
                <div class="info-item">
                    <span class="label">订单编号：</span>
                    <span class="value">{{ orderId }}</span>
                </div>
                <div class="info-item">
                    <span class="label">支付金额：</span>
                    <span class="value">￥{{ amount.toFixed(2) }}</span>
                </div>
            </div>

            <!-- 返回按钮 -->
            <button class="back-button" @click="goBack">返回首页</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            orderId: "2023123456789",
            amount: 299.00
        }
    },
    mounted() {
        this.orderId = this.$route.params.id;

        this.amount = this.$route.params.goodsPrice;
    },
    methods: {
        goBack() {
            this.$router.push('/')
        }
    }
}
</script>

<style scoped>
.success-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

.success-icon {
    margin-bottom: 30px;
}

.checkmark {
    width: 100px;
    height: 100px;
}

.checkmark__circle {
    stroke: #4CAF50;
    stroke-width: 2;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke: #4CAF50;
    stroke-width: 2;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

.success-content {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.title {
    color: #333;
    font-size: 28px;
    margin-bottom: 16px;
}

.description {
    color: #666;
    font-size: 16px;
    margin-bottom: 30px;
}

.order-info {
    text-align: left;
    margin: 25px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.info-item {
    margin: 12px 0;
    font-size: 15px;
}

.label {
    color: #666;
}

.value {
    color: #333;
    font-weight: 500;
}

.back-button {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 20px;
}

.back-button:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}
</style>